import React, { useCallback, useEffect, useState } from 'react'
import { Button, Divider, Flex, Modal, Space, Tooltip, Typography } from 'antd'
import CommentList from '../../../component/CommentList'
import { Detail, apiGetPictureDetail } from '../../../api/detail'
import { Comment, apiGetCommentList } from '../../../api/comment'
import { LikeOutlined, CommentOutlined, StarOutlined } from '@ant-design/icons'
import { useSearchParams } from 'react-router-dom'
import { apiPutPublicPicture } from '../../../api/public'
type PictureDetailProps = {
    id: number
}

const imgStyle: React.CSSProperties = {
    display: 'block',
    width: '70%',
    maxHeight: 750
}
const activeIconStyle: React.CSSProperties = {
    color: 'red'
}
const PrivatePictureDetail: React.FC<PictureDetailProps> = ({ id }) => {
    const [detail, setDetail] = useState<Detail>()
    const [commentList, setCommentList] = useState<Comment[]>([])
    const [publicOpen, setPublicOpen] = useState<boolean>(false)
    const [searchParams] = useSearchParams()
    const fetchDetail = useCallback(async () => {
        try {
            const d = await apiGetPictureDetail({ id: id })
            setDetail(d)
        } catch (error) {
            //nothing
        }
    }, [id])
    const fetchCommentList = useCallback(async () => {
        try {
            const cs = await apiGetCommentList({ pictureId: id })
            setCommentList(cs.list)
            console.log(cs)

        } catch (error) {
            //nothing
        }
    }, [id])
    const togglePublicPicture = useCallback(async () => {
        try {
            const cs = await apiPutPublicPicture({ pictureId: id, public: true })
            console.log(cs)

        } catch (error) {
            //nothing
        }
    }, [id])
    const onPublicClick = async () => {
        setPublicOpen(true)
    }
    const onPublicOk = async () => {
        await togglePublicPicture()
        setPublicOpen(false)
    }
    useEffect(() => {
        fetchDetail()
        fetchCommentList()
    }, [fetchCommentList, fetchDetail])
    return (
        <>
            <Modal open={publicOpen} onOk={onPublicOk} title='确认' children='确认公开图片？' cancelText='取消' onCancel={() => setPublicOpen(false)} />
            <Flex>
                <img
                    alt={detail?.desc}
                    src={detail?.imageUrl}
                    style={imgStyle}
                />

                <Flex vertical style={{ padding: 32, width: '30%', height: 500, overflowX: 'hidden', overflowY: 'auto' }}>


                    <Typography.Title level={3}>
                        {detail?.title}
                    </Typography.Title>
                    <Typography.Text>
                        {detail?.desc}
                    </Typography.Text>
                    <Divider />
                    <CommentList data={commentList} />

                    {searchParams.get('category_id') && <Button onClick={onPublicClick}>分享到公共</Button>}
                    <br />
                    <Button>分享到网络</Button>
                    <br />
                    <Space>
                        <Tooltip title="点赞">
                            <Button icon={<LikeOutlined style={detail?.likeState ? activeIconStyle : undefined} />} ><span> {detail?.likeCount || 0}</span></Button>

                        </Tooltip>
                        <Tooltip title="评论">
                            <Button icon={<CommentOutlined />} ><span>{detail?.commentCount}</span></Button>

                        </Tooltip>
                        <Tooltip title="收藏">
                            <Button icon={<StarOutlined />} ><span>{detail?.favoriteCount}</span></Button>
                        </Tooltip>
                    </Space>
                </Flex>
            </Flex>
        </>
    )
}

export default PrivatePictureDetail